What is VueX?

Luca Mezzalira: VueX is a state management pattern for Vue.js applications. It allows you to structure your code in a simple but very effective way by dividing the different domains of a web application in order to have a clear separation of concerns and a single responsibility for each object.
Can you give us a short introduction into the state management pattern of VueX?

Luca Mezzalira: VueX is a plugin for Vue.js which was created for using an opinionated library for handling the application state of Vue.js applications.

VueX leverages several characteristics that reactive architectures are embracing such as unidirectional data flow, strong separation of concerns and automatic update of DOM elements via different algorithms provided by view libraries through the Virtual DOM.

We are used to having a great documentation in the Vue.js ecosystem. For VueX, there is a simple but very extensive documentation (https://vuex.vuejs.org) with many examples explaining the basics of this library.

At the moment, the pattern is composed of:

State

• State can be modified In strict mode by mutations only
• It can‘t be modified by other parts of the application
• A state can be accessible by any part of VueX applications and from Vue.js components as well

Getters

• Getters expose computed values from the state and cache the value until it is changed inside the state
• Getters are used inside the components via computed values

Actions

• Actions are triggered from user interactions or other actions.
• They handle async operations
• Actions can call other actions but mainly they are used for triggering state mutations

Mutations

• Mutations are called by Actions
• Mutations manipulate the state directly
• Only Mutations can mutate the state in strict mode

During the last VueConf in Amsterdam, Evan You announced some nice changes to VueX that should be implemented this year to simplify de fact how VueX is working. One of those changes has to do with the Mutations. Mutations are going to be removed from the library, thus enabling the actions to change the state directly like other state management systems are doing, for example in the MobX State Tree.

What kind of application is a typical use case for VueX?

Luca Mezzalira: VueX can be used in any context where Vue.js is used, for now I would say mainly web applications but it could potentially be used in hybrid mobile applications or for SmartTV, console and set-top-boxes development.

What makes VueX a good choice for scaling Vue applications?

Luca Mezzalira: The main challenge when talking about scalability in front-end applications is not how to scale the infrastructure but how to scale the team. VueX provides a consistent and clear way to work with enhancing the elegant Vue.js base and moving it to a proper and solid solution for building web applications at scale.

Any developer can easily pick up the pattern in a few days if not hours and they can immediately become productive. The pattern also allows to spin up multiple teams working on the same code base without having too much communication overhead thanks to the unidirectional flow.

Debugging VueX applications is also very easy because the separation of concerns and the single responsibility principles are well applied.

What can attendees get out of your talk?

Luca Mezzalira: During my talk, I’ll introduce VueX and explain how reactive programming helps this library to become a good ally for our day-to-day job in Vue.js applications.

I’ll also present an example of a cryptocurrency dashboard that I developed in order to explain the concepts behind VueX. I’m really excited about this talk and, considering it will be the first time that I’m going to do it, I really hope the attendees will enjoy it.